<template>
  <section class="recommend">
    <header :class="bg">
      <div class="banner">{{ fn }}F&nbsp;{{ data.name | substr }}</div>
      <div class="main-recommend">
        <template v-for="item in data.seriesList">
          <el-link
            :key="item.id"
            :underline="false"
            type="default"
            @click="getGoodsList(item.id)"
            >{{ item.name | substr }}</el-link
          >
        </template>
      </div>
    </header>
    <main>
      <div class="left">
        <el-image
          style="width: 215px; height: 290px"
          :src="data.photo"
          fit="fit"
        ></el-image>
        <div class="main-recommend">
          <template v-for="item in data.seriesList">
            <el-link
              :key="item.id"
              :underline="false"
              type="default"
              @click="toGoodList(item.id, item.name, item.topid)"
              >{{ item.name | substr }}</el-link
            >
          </template>
        </div>
      </div>
      <div class="list">
        <template v-for="(item, index) in goodsList">
          <div class="item" :key="item.id" v-if="index < 8">
            <el-link :underline="false" @click="toDetail(item.id)">
              <el-image
                style="width: 200px; height: 150px"
                :src="item.mainPhoto"
                fit="fit"
              ></el-image>
            </el-link>
            <div class="name">{{ item.name | substrName }}</div>
            <div class="recommend">{{ item.recommend | substrName }}</div>
          </div>
        </template>
      </div>
    </main>
  </section>
</template>

<script>
import { getGoodsList } from "@/api/api";
export default {
  name: "Block",
  props: {
    floorNumber: {
      type: Number,
      default: 1,
    },
    data: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  data() {
    return {
      goodsList: [],
    };
  },
  created() {
    if (this.data.seriesList.length > 0) {
      let firstCategory = this.data.seriesList[0].id;
      this.getGoodsList(firstCategory);
    }
  },
  computed: {
    fn() {
      return this.floorNumber + 1;
    },
    bg() {
      return "bg-" + (this.floorNumber % 5);
    },
  },
  methods: {
    toGoodList(firstCategory, firstCategoryName, topid) {
      this.$store.dispatch("user/getGoodsList", {
        firstCategory,
        firstCategoryName,
        deviceType: topid,
      });
      if (this.$router.currentRoute.name !== "GoodsList") {
        this.$router.push({ path: "/goodsList" });
      }
    },
    getGoodsList(firstCategory) {
      let params = { firstCategory, page: 1, page_size: 8 };
      getGoodsList(params).then((res) => {
        this.goodsList = res.data.list || [];
        console.info(this.floorNumber + 1 + "F 商品", this.goodsList);
      });
    },
    toDetail(id) {
      this.$router.push({ path: "/goodsDetail", query: { id } });
    },
  },
  filters: {
    substr: function(value) {
      if (value.length > 6) {
        value = value.substring(0, 5) + "…";
      }
      return value;
    },
    substrName: function(value) {
      if (value.length > 14) {
        value = value.substring(0, 12) + "…";
      }
      return value;
    },
  },
};
</script>

<style lang="scss" scoped>
$left-width: 215px;

.recommend {
  width: 1200px;
  margin: 0 auto 20px;

  header {
    height: 40px;
    overflow: hidden;
    display: flex;
    justify-content: flex-start;
    align-items: center;

    .banner {
      width: $left-width;
      background: #3378ff;
      color: #ffffff;
      font-size: 24px;
      line-height: 40px;
      text-align: left;
      padding-left: 20px;
    }

    .main-recommend {
      width: calc(100% - #{$left-width});
      height: 100%;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      border-bottom: 2px solid #3378ff;

      ::v-deep .el-link {
        font-family: Microsoft YaHei;
        font-style: normal;
        font-weight: bold;
        font-size: 16px;
        line-height: 21px;
        color: #303133;
        width: calc(100% / 6);
      }
    }
  }
  main {
    display: flex;
    justify-content: flex-start;
    border: 1px solid #ebeef5;

    .left {
      width: $left-width;
      height: 410px;
      overflow: hidden;

      .main-recommend {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        flex-wrap: wrap;
        padding: 10px;

        .el-link {
          padding: 10px;
          width: 50%;
          font-size: 13px;
          text-align: left;
        }
      }
    }

    .list {
      width: calc(100% - #{$left-width});
      display: flex;
      justify-content: flex-start;
      flex-wrap: wrap;
      overflow: hidden;
      border-left: 1px solid #ebeef5;

      .item {
        width: 25%;
        height: 50%;
        border-right: 1px solid #ebeef5;
        border-bottom: 1px solid #ebeef5;
        padding: 15px;

        font-size: 13px;
        line-height: 17px;
        color: #909399;

        .name {
          font-weight: bold;
          color: #303133;
          margin: 5px 0;
        }
      }
      .item:nth-child(4n) {
        border-right: none;
      }
      .item:nth-child(5),
      .item:nth-child(6),
      .item:nth-child(7),
      .item:nth-child(8) {
        border-bottom: none;
      }
    }
  }
}

.bg-0 {
  background-image: url("../../../assets/1F.png");
  background-repeat: no-repeat;
}
.bg-1 {
  background-image: url("../../../assets/2F.png");
  background-repeat: no-repeat;
}
.bg-2 {
  background-image: url("../../../assets/3F.png");
  background-repeat: no-repeat;
}
.bg-3 {
  background-image: url("../../../assets/4F.png");
  background-repeat: no-repeat;
}
.bg-4 {
  background-image: url("../../../assets/5F.png");
  background-repeat: no-repeat;
}
</style>
